<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<meta name="keywords" content="discovery-console" />
	<meta name="description" content="discovery-console" />
	<!-- 网页标签标题 -->
	<title>discovery-console</title>
	<link rel="shortcut icon" href="/img/nacos.ico"/>
	<link rel="stylesheet" href="/build/blogDetail.css" />
</head>
<body>
	<div id="root"><div class="blog-detail-page" data-reactroot="" data-reactid="1" data-react-checksum="968353927"><header class="header-container header-container-normal" data-reactid="2"><div class="header-body" data-reactid="3"><a href="/en-us/index.html" data-reactid="4"><img class="logo" src="/img/nacos_colorful.png" data-reactid="5"/></a><span class="language-switch language-switch-normal" data-reactid="6">中</span><div class="header-menu" data-reactid="7"><img class="header-menu-toggle" src="/img/menu_gray.png" data-reactid="8"/><ul data-reactid="9"><li class="menu-item menu-item-normal" data-reactid="10"><a href="/en-us/index.html" data-reactid="11">HOME</a></li><li class="menu-item menu-item-normal" data-reactid="12"><a href="/en-us/docs/quick-start.html" data-reactid="13">DOCS</a></li><li class="menu-item menu-item-normal menu-item-normal-active" data-reactid="14"><a href="/en-us/blog" data-reactid="15">BLOG</a></li><li class="menu-item menu-item-normal" data-reactid="16"><a href="/en-us/community" data-reactid="17">COMMUNITY</a></li><li class="menu-item menu-item-normal" data-reactid="18"><a href="http://console.nacos.io/nacos/index.html" data-reactid="19">DEMO-CONSOLE</a></li></ul></div></div></header><section class="blog-content markdown-body" data-reactid="20"><p>Nacos是阿里巴巴中间件部门最近开源的一款用于服务发现和配置管理的产品。在既0.1版本发布基本功能和0.2版本发布与Spring生态结合的功能后，0.3版本将释放全新的控制台界面。配置管理功能相关的控制台，将会由阿里云商业产品ACM控制台改造而来，而服务发现的控制台界面，则将以首次露面的姿态，开放给开源社区。本文就将服务发现控制台相关的界面UI初版设计公布，欢迎大家参与讨论，希望通过大家的批评和建议，将服务发现控制台这块的功能和界面，设计的更加美观和易用。</p>
<p>服务发现控制台的主要功能是服务列表的展示和搜索，以及服务配置、集群配置、实例配置的查询和更新。在0.3版本中，主要会有两个页面：服务列表和服务详情。</p>
<h1>服务列表</h1>
<p>服务列表页面主要展示已经在Nacos注册的服务列表，以及服务的基本信息，服务的基本信息有：服务的名称、服务下集群的数目、服务下实例的数目、服务的健康程度以及进入服务详情的按钮。同时右上角还有一个支持根据服务名搜索服务的搜索框和搜索按钮。</p>
<div data-type="alignment" data-value="center" style="text-align:center">
  <div data-type="p">
    <div id="soktqz" data-type="image" data-display="block" data-align="center" data-src="https://cdn.nlark.com/lark/0/2018/png/15356/1538701093629-9880a456-8a37-4663-bd88-853441dab3f4.png" data-width="572">
      <img src="https://cdn.nlark.com/lark/0/2018/png/15356/1538701093629-9880a456-8a37-4663-bd88-853441dab3f4.png" width="572" />
    </div>
  </div>
  <div data-type="p">图1 服务列表页面</div>
</div>
<h1>服务详情</h1>
<p>在服务列表页面点击“detail”按钮，就会进入服务详情页面。服务详情页面展示的是一个服务的所有关键信息，包括服务的配置和元数据、集群列表和示例列表，以及一些操作的按钮。</p>
<div data-type="alignment" data-value="center" style="text-align:center">
  <div data-type="p">
    <div id="soktqz" data-type="image" data-display="block" data-align="center" data-src="https://cdn.nlark.com/lark/0/2018/png/15356/1538701116839-4753cafa-f5f6-4866-a19d-f1293489053d.png" data-width="607">
      <img src="https://cdn.nlark.com/lark/0/2018/png/15356/1538701116839-4753cafa-f5f6-4866-a19d-f1293489053d.png" width="607" />
    </div>
  </div>
  <div data-type="p">图2 服务详情页面</div>
</div>
<p>在该页面的上方，是服务的配置和元信息，目前包含服务名、保护阈值、健康检查模式以及元数据metadata。右上方是编辑服务按钮，点击后会有对话框弹出，可以对服务的配置进行编辑。</p>
<div data-type="alignment" data-value="center" style="text-align:center">
  <div data-type="p">
    <div id="soktqz" data-type="image" data-display="block" data-align="center" data-src="https://cdn.nlark.com/lark/0/2018/png/15356/1538701150783-fa6d58cf-01f4-430c-a5d0-6278c9590404.png" data-width="362">
      <img src="https://cdn.nlark.com/lark/0/2018/png/15356/1538701150783-fa6d58cf-01f4-430c-a5d0-6278c9590404.png" width="362" />
    </div>
  </div>
  <div data-type="p">图3 更新服务对话框</div>
</div>
<p>服务详情的下方，是集群列表和集群下的实例列表。每个集群会显示一个集群名，和相应的查看&amp;更新集群详情按钮。点击该按钮后，会是一个更新集群的对话框。</p>
<div data-type="alignment" data-value="center" style="text-align:center">
  <div data-type="p">
    <div id="soktqz" data-type="image" data-display="block" data-align="center" data-src="https://cdn.nlark.com/lark/0/2018/png/15356/1538701200952-f9dcb51e-100e-4501-a3db-d665dfaf7188.png" data-width="362">
      <img src="https://cdn.nlark.com/lark/0/2018/png/15356/1538701200952-f9dcb51e-100e-4501-a3db-d665dfaf7188.png" width="362" />
    </div>
  </div>
  <div data-type="p">图4 更新集群（TCP健康检查）</div>
</div>
<div data-type="alignment" data-value="center" style="text-align:center">
  <div data-type="p">
    <div id="soktqz" data-type="image" data-display="block" data-align="center" data-src="https://cdn.nlark.com/lark/0/2018/png/15356/1538701223427-284aaf1c-1cd3-412e-9f22-d5baae2cee25.png" data-width="362">
      <img src="https://cdn.nlark.com/lark/0/2018/png/15356/1538701223427-284aaf1c-1cd3-412e-9f22-d5baae2cee25.png" width="362" />
    </div>
  </div>
  <div data-type="p">图5 更新集群（HTTP健康检查）</div>
</div>
<p>图4和图5分别展示了对集群更新的两种对话框展示，两者的区别是选择了不同的健康检查方式。TCP健康检查方式可以配置检查的端口；HTTP健康检查方式可以配置检查的端口、检查的路径和HTTP头部信息。同时还可以配置是否采用实例的端口进行健康检查，如果配置为true，则健康检查将使用实例注册的端口进行通信。该对话框还可以编辑集群的元信息。</p>
<p>每个集群下面都会有实例列表，实例列表将会分页展示该集群下注册的所有实例，展示的信息有IP、端口、权重、是否健康、元信息和对应的编辑及下线按钮。下线按钮点击后，该实例将不会返回给订阅端，无论该实例是否健康。“下线”文本会改成“上线”，用于对应的实例上线操作。点击编辑按钮，则会进入编辑实例对话框。</p>
<div data-type="alignment" data-value="center" style="text-align:center">
  <div data-type="p">
    <div id="soktqz" data-type="image" data-display="block" data-align="center" data-src="https://cdn.nlark.com/lark/0/2018/png/15356/1538701250740-ffb38cd0-a15d-4425-a2ca-48c5d0d2698e.png" data-width="346">
      <img src="https://cdn.nlark.com/lark/0/2018/png/15356/1538701250740-ffb38cd0-a15d-4425-a2ca-48c5d0d2698e.png" width="346" />
    </div>
  </div>
  <div data-type="p">图6 编辑实例对话框</div>
</div>
<p>编辑实例对话框，可以编辑的信息有实例的权重、是否上下线和元信息。</p>
<p>0.3版本的服务发现页面，基本就是这样，欢迎大家的反馈。服务注册客户端也可以编辑服务、集群、实例元信息，这些可能会和控制台的编辑相冲突，目前的机制是，不管是控制台更新和客户端更新，都将被Nacos服务端所接受，这点也欢迎大家给出自己的看法。最后也预祝大家国庆放假愉快！</p>
</section><footer class="footer-container" data-reactid="21"><div class="footer-body" data-reactid="22"><img src="/img/nacos_gray.png" data-reactid="23"/><div class="cols-container" data-reactid="24"><div class="col col-12" data-reactid="25"><h3 data-reactid="26">Vision</h3><p data-reactid="27">By providing an easy-to-use service infrastructure such as dynamic service discovery, service configuration, service sharing and management and etc., Nacos help users better construct, deliver and manage their own service platform, reuse and composite business service faster and deliver value of business innovation more quickly so as to win market for users in the era of cloud native and in all cloud environments, such as private, mixed, or public clouds.</p></div><div class="col col-6" data-reactid="28"><dl data-reactid="29"><dt data-reactid="30">Documentation</dt><dd data-reactid="31"><a href="/en-us/docs/what-is-nacos.html" target="_self" data-reactid="32">Overview</a></dd><dd data-reactid="33"><a href="/en-us/docs/quick-start.html" target="_self" data-reactid="34">Quick start</a></dd><dd data-reactid="35"><a href="/en-us/docs/contributing.html" target="_self" data-reactid="36">Developer guide</a></dd></dl></div><div class="col col-6" data-reactid="37"><dl data-reactid="38"><dt data-reactid="39">Resources</dt><dd data-reactid="40"><a href="/en-us/community/index.html" target="_self" data-reactid="41">Community</a></dd></dl></div></div><div class="copyright" data-reactid="42"><span data-reactid="43">@ 2018 The Nacos Authors | An Alibaba Middleware (Aliware) Project</span></div></div></footer></div></div>
	<script src="https://f.alicdn.com/react/15.4.1/react-with-addons.min.js"></script>
	<script src="https://f.alicdn.com/react/15.4.1/react-dom.min.js"></script>
	<script>
		window.rootPath = '';
  </script>
	<script src="/build/blogDetail.js"></script>
</body>
</html>